{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Go2 - Plan Your Journey</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Bqco2DvRVp55QdFyANIiDRSKS8IE8p8&libraries=places"></script>
    
    
    <!--import css -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
    
    <!-- Bootstrap CSS CDN -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">

    <!--add favicon-->
    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.png' %}"/>
    
    <!--adding google icons for mobile nav-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!--import js -->
    <!-- <script type="text/javascript" src="{% static 'js/initialize.js' %}"></script> -->
    <script type="text/javascript" src="{% static 'js/jquery-1.8.3.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/station_map.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/cookies.js' %}"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/cookies-monster/0.1.4/cookies-monster.js"></script> -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    
    <!-- <script src="js/jquery-3.1.1.min.js"></script> -->
    <!-- <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <!-- <link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet" /> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/jquery-ui-timepicker-addon.min.js' %}"></script>
    
    <link type="text/css" href="{% static 'css/jquery-ui-timepicker-addon.min.css' %}" rel="stylesheet" />


</head>
<body>
    <script type="text/javascript">window.onload=function () {initMap();}</script>


    <div id="googleMap"></div>
    <header>
        <nav>
            <div class="burger">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
            <div class="logo">Go2</div>
            <div class="spacer"></div>
            <a href="{% url 'user_manage:login' %}"><input type="button" value="Login/Register" name="login/register" id="loginpos" onclick=""></a>
            
            
            <div id="weather"></div>
        </nav>         
    </header>
    <div class="modal" id="modal">
        <div class="modal-top">
            <div class="modal-menu">
                <a class="nav-link" id="search" onclick="showsearchcontent();">
                    <span class="material-icons nav-icon">directions</span>
                    <span class="nav-text">Plan Route</span>
                </a>
                <a class="nav-link" id = "stop" onclick="showstopsearchcontent()">
                    <span class="material-icons nav-icon">place</span>
                    <span class="nav-text">Search By Stop</span>
                </a>
                <a class="nav-link" id="route">
                    <span class="material-icons nav-icon">directions_bus</span>
                    <span class="nav-text">Search By Route</span>
                </a>
                <a class="nav-link" id = "leapcard">
                    <span class="material-icons nav-icon">payment</span>
                    <span class="nav-text">Leapcard</span>
                </a>
                <a class="nav-link" href="#" id="favorite" class="dropbtn">
                    <span class="material-icons nav-icon">favorite</span>
                    <span class="nav-text">Favorites</span>
                </a>
            </div>
            <div class="modal-cont">
                <div class="forms">
                    <div id = "searchid">
                        <div class="form">
                            <form id="routesearch" class= "input-fields" action="" method="post">
                                
                                <i class = "far fa-heart place" ></i>
                                <input id="origin" type="text" name="start_location" placeholder="From..." onclick="select_ori_dest('origin')">
                                <input id="destination" type="text" name="end_location" placeholder="To..." onclick="select_ori_dest('destination')">
                                
                                <div class="datetimes">
                                    <input type="text" id="datetimepicker1" placeholder="Date &amp; Time (optional)"/>
                                </div>

                                
                                <button id="go" type = "button" onclick = "calcRoute()">Go!</button>
                            </form>
                        </div>
                        <div id="fares"></div>
                        <div id="routes"></div>
{#                        <div id="singleroutesearchresult"></div>#}
                        
    {#                    <div><div></div><h4 id="h51"></h4></div>#}
                        <!-- <div class="card">
                            <div class="card-body">
                                <img src="../static/images/icon-BUS.png">
                            </div>
                        </div> -->
{#                        <div class="card" style="background-color:aliceblue;">#}
                            <div id="directions-body" class="card-body" style='color:black;'></div>
{#                        </div>#}
                        {% comment %} <div><h4 id="h51"></h4></div> {% endcomment %}
                    </div>

                    <div id = "routeid">
                        <div class="form">
                            <form class="input-fields" method="post" id = "routeadd">
                                {% csrf_token %}
                                <i class = "far fa-heart route" ></i>
                                <input type='text' id = "route_id" name = "route_id" placeholder="Route ID">
                                <button id = "routebtn" type="button" onclick="routesearch()">Find Route</button>

                                <div id="singleroutesearchresult"></div>
                            </form>
                        
                        </div>
{#                        <div id="routes"></div>#}
                        
                    </div>

                    <div id = "leapcardid">
                        <div class="form">
                            <form id="leaplogin" class="input-fields" method="post" id = "lpadd">
                                {% csrf_token %}
                                <input type='text' id = "username" name = "username" placeholder="Username">
                                <input type='password' id = "password" name = "password" placeholder="Password">
                                <button id = "lpbtn" type="button">Check Leap Balance</button>
                            </form>
                        </div>
                        <div id ="lparea"></div>
                    </div>

                    <div id = "favoriteid">
                        <ul class="fav-links">
                            <li><a href="#" id = "myplace">My Places</a></li>
                            <li><a href="#" id = "mystop">My Stops</a></li>
                            <li><a href="#" id = "myroute">My Routes</a></li>
                        </ul>
                        <div class="modal-populated" id ="favoritearea"></div>
                    </div>

                    <div id = "stopid">
                        <div class="form">
                            <form class="input-fields" method="post" id = "stopadd">
                               
                                {% csrf_token %}
                                <i class = "far fa-heart star" ></i>
                                <input type='text' id = "stop_id" name = "stop_id" placeholder="Stop ID">
                                <button id = "stopbtn" type="button" onclick="stopsearch()">Find Stop</button>
                                <div ><button id = "markerbtn"  type="button" onclick="showandhide()" >All Stops</button></div>
                                
                            </form>
                        </div>
                        <div class="modal-populated" id ="stoparea"></div>
                    </div>

{#                <div id = "routeid">#}
{#                    <div>#}
{#                        <form method="post" id = "routeadd">#}
{#                            {% csrf_token %}#}
{#                            Route: <i class = "far fa-star star" ></i>#}
{#                            <input type='text' id = "route_id" name = "route_id" autocomplete="on">#}
{#                            <button id = "routebtn" type="button" onclick="routesearch()">Submit</button>#}
{#                        </form>#}
{#                    </div>#}
{#                    <div id ="routearea"></div>#}
{#                </div>#}
                <div id="nearme"></div>
                </div> {# end of class 'form' #}
            </div> {# end of class 'modal-content' #}
        </div> {# end of class 'modal-top' #}
        <div class="modal-bottom">
            <div id = "twitterid">
                <a class="twitter-timeline" data-width="400" data-height="400" data-theme="dark" href="https://twitter.com/dublinbusnews?ref_src=twsrc%5Etfw">Tweets by dublinbusnews</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div> {# end of id "twitterid" #}
        </div>
    </div>
    <div class="cookie-banner">
        <div class="cookie-text">This website uses cookies to track your favorites. These may be deleted at any time by you or your browser. By proceeding, you are consenting to the use of cookies for this purpose.</div>
        <div class="cookie-btn-div">
            <button class="cookie-btn">Okay</button>
        </div>
    </div>

<script>
    //script to toggle cookie banner & remember consent selection
    const cookieBanner = document.querySelector('.cookie-banner');
    const cookieBtn = document.querySelector('.cookie-btn')

    cookieBtn.addEventListener('click', () => {
        cookieBanner.classList.remove("active");
        localStorage.setItem("cookieBannerDisplayed", "true");
    });

    setTimeout( () => {
        if(!localStorage.getItem("cookieBannerDisplayed")){
            cookieBanner.classList.add("active");
        }
    }, 500);
</script>

<script>
    const modalSlide = () => {
        const burger = document.querySelector('.burger');
        const modal = document.querySelector('.modal');
            
        burger.addEventListener('click', () => {

            //Toggle nav
            modal.classList.toggle('modal-active');

            //Animation for burger
            burger.classList.toggle('toggle');
        });
    }

    modalSlide();
</script>

<script>
    var input = document.getElementById("route_id");
    input.addEventListener("keydown", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("routebtn").click();
        }
    });
</script>
<script>
    var input = document.getElementById("routesearch");
    input.addEventListener("keydown", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("go").click();
        }
    });
</script>
<script>
    var input = document.getElementById("leaplogin");
    input.addEventListener("keydown", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("lpbtn").click();
        }
    });
</script>
<script>
    var input = document.getElementById("stop_id");
    input.addEventListener("keydown", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById("stopbtn").click();
        }
    });
</script>

<script>
	$('#datetimepicker1').datetimepicker({
        inline:true,
        dateFormat: 'yy-mm-dd'
    });
	</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
    });
</script>

<script type="text/javascript">
    $(".star").click(function(){
        $(this).toggleClass("fa fa-star fa fa-star");
    });
</script>
    


<!-- add autocomplete function for the input -->
<script>
    var origin = 'origin';
    var destination = 'destination';

    $(document).ready(function(){
        var autocomplete;
        autocomplete = new google.maps.places.Autocomplete((document.getElementById(origin)),{
            types:['geocode'],
        });

        google.maps.event.addListener(autocomplete,'place_changed', function(){
            var near_place = autocomplete.getPlace();
        });

        var autocomplete_des;
        autocomplete_des = new google.maps.places.Autocomplete((document.getElementById(destination)),{
            types:['geocode'],
        });

        google.maps.event.addListener(autocomplete_des,'place_changed', function(){
            var near_place_des = autocomplete.getPlace();
        });
    })
</script>


<script type="text/javascript">

</script>

<!-- the onclick function that will hide some feature div -->
        <script type = "text/javascript">
        $(document).ready(function(){
            // alert('hi');
            $('#searchid').siblings().hide();
            $('#twitterid').show();
            $('#searchid').show();
            $('#nearme').show();
        });
            
        </script>
        <script type = "text/javascript">
            $('#leapcard').click(function(){
                $('#leapcardid').siblings().hide();
                $('#twitterid').show();
                $('#leapcardid').show();
                $('#myplace').hide();
                $('#mystop').hide();
                $('#myroute').hide();
                $(".db").removeClass("show");
            })
        </script>
        <script type = "text/javascript">
            $('#stop').click(function(){
                $('#stopid').siblings().hide();
                $('#twitterid').show();
                $('#stopid').show();
                $('#routeid').hide();
                $('#myplace').hide();
                $('#mystop').hide();
                $('#myroute').hide();
                $(".db").removeClass("show");
            })
        </script>
        <script type = "text/javascript">
            $('#route').click(function(){
                $('#routeid').siblings().hide();
                $('#twitterid').show();
                $('#routeid').show();
                $('#stopid').hide();
                $('#myplace').hide();
                $('#mystop').hide();
                $('#myroute').hide();
                $(".db").removeClass("show");
            })
        </script>
        <script type = "text/javascript">
            $('#search').click(function(){
                $('#searchid').siblings().hide();
                $('#twitterid').show();
                $('#searchid').show();
                $('#nearme').show();
                $('#myplace').hide();
                $('#mystop').hide();
                $('#myroute').hide();
                $(".db").removeClass("show");
            })
        </script>
        <script type = "text/javascript">
            $('#favorite').click(function(){
                $('#favoriteid').siblings().hide();
                $('#myplace').show();
                $('#mystop').show();
                $('#myroute').show();
                // $('#searchid').empty();
                // $('#nearme').empty();
                // $('#stoparea').empty();
                $("#favoritearea").empty();
                $('#favoriteid').show();
                $(".db").toggleClass("show");
                $('#twitterid').show(); 
                 
            })
        </script>
        

    <!-- when user click the star, and stop they input will be added to the favorite -->   
    <script type="text/javascript" >
        $('.star').click(function(e){
            e.preventDefault;
            var stop = [];
            if (document.getElementById("stop_id").value === ""){
                alert('please input stop')
            }
            else{
                // the first time user input the form 
                stop.push(document.getElementById("stop_id").value);
                try{
                    cookieCollect.get('stop');
                }
                catch{
                    cookieCollect.set('stop', stop, 3650);
                    console.log(cookieCollect.get('stop'))
                    alert('Saved Sucessfully');
                    return ;
                }

                // except the first time of the user input, to get the cookies
                var input_stop =  document.getElementById("stop_id").value;
                var previous_arr = cookieCollect.get('stop');
                // console.log(input_stop);
                // console.log(previous_arr);
                var flag = 0;
                for (let i = 0; i<previous_arr.length; i++){
                    if (input_stop == previous_arr[i]){
                        alert("This stop is already in the list");
                        flag = 1;
                    }
                }
                if (flag == 0){
                    // $(this).toggleClass("fa fa-star fa fa-star");
                    try{
                        cookieCollect.get('stop');
                        console.log(cookieCollect.get('stop'));
                        cookieCollect.append('stop', stop, 3650);
                        console.log(cookieCollect.get('stop'));

                    } catch(err){
                        cookieCollect.set('stop', stop, 3650);
                    }
                    alert('Saved Sucessfully');
                }

            }
        });
    </script>


    <!-- showthe cookies of the stop on the favorite page  -->
    <script type="text/javascript" >
        $(function(){
            $("#mystop").click(function(e){
            $("#favoritearea").html("");
            // alert("hi");
            var tableContent = document.createElement("div");
            var stopArr = cookieCollect.get('stop');
            document.body.appendChild(tableContent);

            var iconstar;
            
                for (let i = 0; i<stopArr.length; i++){
                    let stop = stopArr[i];
                    
                    var wrapper = document.createElement("div");
                    wrapper.className = "favs-wrapper"; 
                    
                    var stop_elem = document.createElement("span");
                    var t = document.createTextNode(stop);
                    stop_elem.appendChild(t); 
                    // iconstar = document.createElement("i");
                    // iconstar.setAttribute('class', 'fa fa-star starcancel');

                    iconstar = document.createElement("a");
                    iconstar.innerHTML = "&times;";
                    
                    wrapper.appendChild(stop_elem);
                    wrapper.appendChild(iconstar);

                    tableContent.appendChild(wrapper);
                    
                    document.getElementById("favorite").appendChild(tableContent);

                    // delete the favorite stop when they click the button
                    iconstar.addEventListener('click', function(){
                        // alert("hi");
                        var stopList = cookieCollect.get('stop');
                        for (let j = 0; j < stopArr.length; j++){
                            if (stopList[j] === stopArr[i]){
                                cookieCollect.splice('stop',i,1,3650);
                            }
                        }
                    });

                    //When fav in list is clicked, shows stop & realtime
                    stop_elem.addEventListener('click', function(){
                        $('#stopid').siblings().hide();
                        $('#twitterid').show();
                        $('#stopid').show();
                        $('#routeid').hide();
                        $('#myplace').hide();
                        $('#mystop').hide();
                        $('#myroute').hide();
                        $(".db").removeClass("show");

                        $('#stop_id').val(stop);
                        $('#stopbtn').click();
                    });

                }

            $("#favoritearea").html(tableContent);
            });
        });
    </script>

<!-- add user favorite palce to the cookies when they click the star button -->
<script type="text/javascript" >
    $('.place').click(function(e){
        e.preventDefault;
        var place = [];
        // alert('hiiiii');
        if ($('#origin').val() === ""){
            alert('please input place')
        }
        else{
            place.push($('#origin').val());
            try{
                cookieCollect.get('place');
            }
            catch{
                cookieCollect.set('place', place, 3650);
                console.log(cookieCollect.get('place'))
                alert('Saved Sucessfully');
                return ;
            }


            var input_place =  $('#origin').val();
            var previous_arr = cookieCollect.get('place');
            // console.log(input_stop);
            // console.log(previous_arr);
            var flag = 0;
            for (let i = 0; i<previous_arr.length; i++){
                if (input_place == previous_arr[i]){
                    alert("This place is already in the list");
                    flag = 1;
                }
            }
            if (flag == 0){
                // $(this).toggleClass("fa fa-star fa fa-star");
                try{
                    cookieCollect.get('place');
                    console.log(cookieCollect.get('place'));
                    cookieCollect.append('place', place, 3650);
                    console.log(cookieCollect.get('place'));

                } catch(err){
                    cookieCollect.set('place', place, 3650);
                }
                alert('Saved Sucessfully');
            }

        }
    });
</script>

<!-- show their favorite place on the page -->
<script type="text/javascript" >
    $(function(){
        $("#myplace").click(function(e){
        $("#favoritearea").html("");
        // alert("hi");
        var tableContent = document.createElement("div");
        var placeArr = cookieCollect.get('place');
        document.body.appendChild(tableContent);

        var iconstar;
        
            for (let i = 0; i<placeArr.length; i++){
                let place = placeArr[i];

                //Creating wrapper div for each fav
                var wrapper = document.createElement("div");
                wrapper.className = "favs-wrapper"; 

                var place_elem = document.createElement("span");
                var t = document.createTextNode(place);
                place_elem.appendChild(t); 
                
                // iconstar = document.createElement("i");
                // iconstar.setAttribute('class', 'fa fa-star starcancel');

                iconstar = document.createElement("a");
                iconstar.innerHTML = "&times;";
                 
                wrapper.appendChild(place_elem);
                wrapper.appendChild(iconstar);

                tableContent.appendChild(wrapper);
                document.getElementById("favorite").appendChild(tableContent);

                // delete the place when they click the button
                iconstar.addEventListener('click', function(){
                    // alert("hi");
                    var placeList = cookieCollect.get('place');
                    for (let j = 0; j < placeArr.length; j++){
                        if (placeList[j] === placeArr[i]){
                            cookieCollect.splice('place',i,1,3650);
                        }
                    }
                });

                //When fav in list is clicked, shows route planner with place filled in
                    place_elem.addEventListener('click', function(){
                        $('#searchid').siblings().hide();
                        $('#twitterid').show();
                        $('#searchid').show();
                        $('#nearme').show();

                        $('#origin').val(place);
                    });
            }
        
        $("#favoritearea").html(tableContent);
        });
    });
</script>

<script type="text/javascript" >
    $('.route').click(function(e){
        e.preventDefault;
        var route = [];
        if (document.getElementById("route_id").value === ""){
            alert('please input route')
        }
        else{
            // the first time user input the form 
            route.push(document.getElementById("route_id").value);
            try{
                cookieCollect.get('route');
            }
            catch{
                cookieCollect.set('route', route, 3650);
                console.log(cookieCollect.get('route'))
                alert('Saved Sucessfully');
                return ;
            }

            // except the first time of the user input, to get the cookies
            var input_stop =  document.getElementById("route_id").value;
            var previous_arr = cookieCollect.get('route');
            // console.log(input_stop);
            // console.log(previous_arr);
            var flag = 0;
            for (let i = 0; i<previous_arr.length; i++){
                if (input_stop == previous_arr[i]){
                    alert("This route is already in the list");
                    flag = 1;
                }
            }
            if (flag == 0){
                // $(this).toggleClass("fa fa-star fa fa-star");
                try{
                    cookieCollect.get('route');
                    console.log(cookieCollect.get('route'));
                    cookieCollect.append('route', route, 3650);
                    console.log(cookieCollect.get('route'));

                } catch(err){
                    cookieCollect.set('route', route, 3650);
                }
                alert('Saved Sucessfully');
            }

        }
    });
</script>


<!-- showthe cookies of the stop on the favorite page  -->
<script type="text/javascript" >
    $(function(){
        $("#myroute").click(function(e){
        $("#favoritearea").html("");
        // alert("hi");
        var tableContent = document.createElement("div");
        var routeArr = cookieCollect.get('route');
        document.body.appendChild(tableContent);

        var iconstar;
        
            for (let i = 0; i<routeArr.length; i++){
                let route = routeArr[i];

                var wrapper = document.createElement("div");
                wrapper.className = "favs-wrapper";

                var route_elem = document.createElement("span");
                var t = document.createTextNode(route);
                route_elem.appendChild(t); 
                
                // iconstar = document.createElement("i");
                // iconstar.setAttribute('class', 'fa fa-star starcancel');

                iconstar = document.createElement("a");
                iconstar.innerHTML = "&times;";

                wrapper.appendChild(route_elem);
                wrapper.appendChild(iconstar);

                tableContent.appendChild(wrapper);

                document.getElementById("favorite").appendChild(tableContent);
            

                // delete the favorite stop when they click the button
                iconstar.addEventListener('click', function(){
                    // alert("hi");
                    var routeList = cookieCollect.get('route');
                    for (let j = 0; j < routeArr.length; j++){
                        if (routeList[j] === routeArr[i]){
                            cookieCollect.splice('route',i,1,3650);
                        }
                    }
                });

                //When fav in list is clicked, shows 
                route_elem.addEventListener('click', function(){
                        $('#routeid').siblings().hide();
                        $('#twitterid').show();
                        $('#routeid').show();
                        $('#stopid').hide();
                        $('#myplace').hide();
                        $('#mystop').hide();
                        $('#myroute').hide();
                        $(".db").removeClass("show");

                        $('#route_id').val(route);
                        $('#routebtn').click();
                    });
            }
        $("#favoritearea").html(tableContent);
        });
    });
</script>


    
<!-- the function that let the page refrensh only in some part     -->
        <!-- let the leapcard feature refresh -->
        <script type="text/javascript">
            $('#lpbtn').click(function(){
                info = {
                    csrfmiddlewaretoken: '{{ csrf_token }}', 
                    username :  $('#username').val(),
                    password : $('#password').val(),
                    };
                    console.log(info);
    
                    $.ajax({
                        type:"POST",
                        // url: "/leapcard/",
                        url: "{%url 'app01:leapcard'%}",
                        cache: false,
                        dataType: "json",
                        data:info,
                        success: function(result, statues, xml){
                            console.log(result)
                            if (result["wrong"] == "wrong"){
                                $("#lparea").html("Wrong username or password, please try again!");
                                // alert("hi")
                            }
                            else{
                                var leap_table = "<br><table> ";

                                    leap_table += "<tr><td>Card Number </td><td>:   "+result["card_num"]+"</td></tr>";
                                    leap_table += "<tr><td>Card Label </td><td>:  "+result["card_label"] +"</td></tr>";
                                    leap_table += "<tr><td>Card Balance </td><td>:  "+result["balance"] +"</td></tr>";
                                    leap_table += "<tr><td>Card Type </td><td>:  "+result["card_type"] +"</td></tr>";
                                    leap_table += "<tr><td>Expiry Date </td><td>:  "+result["expiry_date"] +"</td></tr>";
                                    leap_table += "</table>";
                                    console.log(result["card_num"]);
                                    $("#lparea").html(leap_table);
                            }
                        },
                        error: function(){
                            alert("false");
                        }
                    });
            });
        </script>

        
        <script type="text/javascript">
            // var todayDate = new Date().getDate();
            // $('#datetimepicker1').datetimepicker({
        
            // });
            $('#datetimepicker1').datetimepicker({
                needDay:true,
                changeMonth: true, //显示月份
                changeYear: true, //显示年份
                showButtonPanel: true, //显示按钮
                timeFormat: "HH:mm",
                dateFormat: "yy-mm-dd"
            });
        </script> 

        <script>
            var stopdata = '{{stopdata|safe}}';
            stopdata = JSON.parse(stopdata);
        </script>
    <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>  
    
</body>
</html>